<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="144x144" href="../img/logo.png" />
  <link rel="apple-touch-icon" type="image/png" sizes="144x144" href="../img/logo.png" />
  <title>天命锁</title>
  <script src="../javascript/vue.js"></script>
  <script src="../javascript/elementui.js"></script>
  <link rel="stylesheet" href="../css/elementui.css">
  <link rel="stylesheet" href="../css/style.css">
</head>

<body style="margin: 0; height: 100%; background: #f5f5f7; font-family: '等线'; overflow: hidden;">
  <div id="app" style="height: 100%;" v-cloak>
    <el-container>
      <el-header height="50px" style="background: #3bba7d;">
        <img src="../img/logo-white.png" class="logo">
        <span class="appName">天命锁</span>
        <img src="../img/skin.png" class="skin">
        <div class="drag"></div>
        <div class="operate">
          <div name="userInfo">
            <img :src="headImg || '../img/headImg.jpg'" @click="dev">
            <span style="max-width: 40px;" @click="quit" title="点击退出登录">{{ nickname || "未登录" }}</span>
            <span class="el-icon-refresh"></span>
            <span title='上次更新时间'>{{ version }}</span>
          </div>
          <div name="setting">
            <img src="../img/setting.svg" @click="settingView = true">
          </div>
          <div name="minimize">
            <img src="../img/minimize.svg" @click="minimize">
          </div>
          <div name="unmaximize" v-if="isMaximize">
            <img src="../img/unmaximize.svg" @click="unmaximize">
          </div>
          <div name="maximize"  v-else>
            <img src="../img/maximize.svg" @click="maximize">
          </div>
          <div name="close" @click="close">
            <img src="../img/close.svg">
          </div>
        </div>
      </el-header>
      <div v-if="settingView">
        <div class="settingTitle">
          <i class="el-icon-arrow-left" @click="settingView = false">设置</i>
        </div>
        <el-form label-position="left" label-width="140px" class="setting">
          <el-form-item label="是否开启pin登陆">
            <el-switch v-model="setting.pinSwitch" active-color="#13ce66" inactive-color="#ff4949" @change="pinSwitchChange"></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <el-container v-else>
        <el-aside width="200px">
          <el-tree :data="data" node-key="id"
            highlight-current
            draggable
            :default-expanded-keys="[1]"
            @node-click="nodeClick"
            ref="tree"
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            @node-drop="update"
            @node-contextmenu="contextmenu"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <i :class="node.data.type === 'dir' ? 'el-icon-folder' : 'el-icon-document'"></i>
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-aside>
        <el-main class='accountInfo'>
          <el-form label-position="left" label-width="80px" :model="accountInfo">
            <el-form-item label="标题">
              <el-input v-model="accountInfo.title" :disabled="!disabledInput"></el-input>
            </el-form-item>
            <el-form-item label="账户名">
              <el-input v-model="accountInfo.username" :disabled="!disabledInput"></el-input>
              <i class="el-icon-document-copy copy" @click="copy(accountInfo.username)"></i>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="accountInfo.password" type="password" show-password :disabled="!disabledInput"></el-input>
              <i class="el-icon-document-copy copy" @click="copy(accountInfo.password)" :style="{right: disabledInput ? '30px' : '10px'}"></i>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" v-model="accountInfo.description" rows="4" :disabled="!disabledInput"></el-input>
            </el-form-item>
          </el-form>
          <div class="save" @click="save">保存</div>
          <div class="historyTitle">操作历史</div>
          <el-timeline>
            <el-timeline-item
              v-for="(history, index) in historyList"        
              :key="index"
              :color="history.id === accountInfo.id ? '#0bbd87' : '#ccc'"
              :timestamp="history.timestamp"
              title="点击切换历史"
            >
              <span :onclick="`app.reset(${ index })`" style="cursor: pointer;">{{ history.content }}</span>&nbsp;
              <i class="el-icon-delete" style="color: #F56C6C; cursor: pointer;" @click="removeHistory(index)"></i>
            </el-timeline-item>
          </el-timeline>
        </el-main>
      </el-container>
    </el-container>
    <ul class='menu' :style="{ top: menuY, left: menuX }" v-show="menuSwitch">
      <li v-for="item of menu" @click='clickMenu(item.id, item.label)'>{{ item.label }}</li>
    </ul>
  </div>
  <script src="../javascript/index.js"></script>
</body>

</html>